<dialog id="details-dialog" class="dialog">
    <div class="dialog-header">
        Process Info
        <div onclick="closeDialog()" class="close-btn">close</div>
    </div>
    <div class="dialog-content">
        <ul>
            <li><span class="task-item">流程名称:</span> {{ process_instance_info.process_name }}</li>
            <li><span class="task-item">流程耗时:</span> {{ process_instance_info.elapsed }}</li>
            <li><span class="task-item">流程状态:</span> {{ process_instance_info.process_status }}</li>
            <li><span class="task-item">触发类型:</span> {{ process_instance_info.run_type }}</li>
            <li><span class="task-item">运行模式:</span> {{ process_instance_info.mode }}</li>
            <li><span class="task-item">开始时间:</span> {{ process_instance_info.start_time }}</li>
            <li><span class="task-item">结束时间:</span> {{ process_instance_info.end_time }}</li>
            <li><span class="task-item">流程参数:</span> {{ process_instance_info.process_params }}</li>
            <li><span class="task-item">流程异常:</span> {{ process_instance_info.process_error_info }}</li>
        </ul>
    </div>
</dialog>

<div>
    <h3>Process Statistics:</h3>
    <table>
        <tr>
            <th>processName</th>
            <th>Elapsed</th>
            <th>state</th>
            <th>startTime</th>
            <th>endTime</th>
            <th>mode</th>
        </tr>
        <tr>
            <td>{{ process_instance_info.process_name }}</td>
            <td>{{ process_instance_info.elapsed }}</td>
            <td>{{ process_instance_info.process_status }}</td>
            <td>{{ process_instance_info.start_time }}</td>
            <td>{{ process_instance_info.end_time }}</td>
            <td>{{ process_instance_info.mode }}</td>
        </tr>
    </table>
</div>